<template>
	<view class="content">
		<!--  header -->
		<view class="Gcolor-nav bg-MegaTron">
			Gcolor
		</view>
		<!-- main -->
		<view class="Gcolor-main">
			<view 
			class="Gcolor-box"
			v-for="(item, index) in colorList"
			:key="index"
			:class="item.name"
			>
				<view class="color-title">
					 {{item.title}}
				</view>
				<view class="color-name">
					 {{item.name}}
				</view>
			</view>			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorList:[{
						'title': ' 小猪粉',
						'name': ' bg-PiggyPink'
					},{
						'title': '威震天',
						'name': 'bg-MegaTron'
					},{
						'title': '天空蓝',
						'name': 'bg-CoolSky'
					},{
						'title': '玛格',
						'name': 'bg-Margo'
					},{
						'title': '深空色',
						'name': 'bg-EvenNight'
					},{
						'title': '休憩红',
						'name': 'bg-RelaxRed'
					},{
						'title': '精致灰',
						'name': 'bg-Delicate'
					},{
						'title': '调味色',
						'name': 'bg-PinkFlavour'
					},{
						'title': '氩',
						'name': 'bg-Argon'
					},{
						'title': '锌',
						'name': 'bg-Zinc'
					},{
						'title': '枯燥灰',
						'name': 'bg-Dull'
					},{
						'title': '伤心色',
						'name': 'bg-BrokenHeart'
					},{
						'title': '电报蓝',
						'name': 'bg-Telegram'
					},{
						'title': '比较色',
						'name': 'bg-Compare'
					},{
						'title': '肉桂绿',
						'name': 'bg-Cinnamit'
					},{
						'title': '静置灰',
						'name': 'bg-Lies'
					},{
						'title': '建筑色',
						'name': 'bg-Jaipur'
					},{
						'title': '玫瑰粉',
						'name': 'bg-RosePink'
					},{
						'title': '菊花色',
						'name': 'bg-Chrysanthemum'
					},{
						'title': '汽水绿',
						'name': 'bg-Limeade'
					},{
						'title': '黄昏',
						'name': 'bg-Dusk'
					},{
						'title': '汽水紫',
						'name': 'bg-PurpleWhite'
					},{
						'title': '天空灰',
						'name': 'bg-GraySky'
					},{
						'title': '猪仔',
						'name': 'bg-Piglet'
					},{
						'title': '肖像',
						'name': 'bg-Portrait'
					},{
						'title': '金属灰',
						'name': 'bg-Metallic'
					},{
						'title': '星期五',
						'name': 'bg-Friday'
					},{
						'title': '樱花粉',
						'name': 'bg-Cherry'
					},{
						'title': '灰烬',
						'name': 'bg-Ash'
					},{
						'title': '纯真',
						'name': 'bg-Virgin'
					},{
						'title': '世俗',
						'name': 'bg-Earthly'
					},{
						'title': '迷雾紫',
						'name': 'bg-DirtyFog'
					},{
						'title': '疲惫',
						'name': 'bg-Strain'
					},{
						'title': '珊瑚礁',
						'name': 'bg-Reef'
					},{
						'title': '糖果',
						'name': 'bg-Candy'
					},{
						'title': '冬天',
						'name': 'bg-winter'
					},{
						'title': '均衡',
						'name': 'bg-Almost'
					},{
						'title': '草地',
						'name': 'bg-Meadow'
					},{
						'title': '长寿花',
						'name': 'bg-Jonquil'
					},{
						'title': '月光',
						'name': 'bg-Moonrise'
					},{
						'title': '桃子',
						'name': 'bg-Peach'
					},{
						'title': '汽水蓝',
						'name': 'bg-Mineral'
					},{
						'title': '正午',
						'name': 'bg-Noon'
					},{
						'title': '欢快',
						'name': 'bg-Sunny'
					},{
						'title': '薄雾紫',
						'name': 'bg-MistPurple'
					},{
						'title': '喝彩',
						'name': 'bg-Cheer'
					},{
						'title': '层级灰',
						'name': 'bg-GradeGrey'
					},{
						'title': '惊艳',
						'name': 'bg-Amazing'
					},{
						'title': '欲望',
						'name': 'bg-Lust'
					},{
						'title': '晚霞',
						'name': 'bg-Sunset'
					},{
						'title': '冰激凌',
						'name': 'bg-Ice'
					},{
						'title': '鲜艳',
						'name': 'bg-Bright'
					},{
						'title': '墨玉',
						'name': 'bg-GreenJade'
					},{
						'title': '遗失',
						'name': 'bg-Lost'
					},{
						'title': '纤维',
						'name': 'bg-Sirius'
					},{
						'title': '璀璨',
						'name': 'bg-Resplendent'
					},{
						'title': '诱惑',
						'name': 'bg-Tempt'
					},{
						'title': '传送',
						'name': 'bg-Shifter'
					},{
						'title': '恋爱',
						'name': 'bg-Love'
					},{
						'title': '天青',
						'name': 'bg-Azure'
					},{
						'title': '磷',
						'name': 'bg-Alihossein'
					},{
						'title': '天木蓝',
						'name': 'bg-Timber'
					},{
						'title': '地图',
						'name': 'bg-Atlas'
					},{
						'title': '分享',
						'name': 'bg-Share'
					},{
						'title': '魔法',
						'name': 'bg-Magic'
					},{
						'title': '升华',
						'name': 'bg-Sublime'
					},{
						'title': '国王',
						'name': 'bg-King'
					},{
						'title': '广播',
						'name': 'bg-Relay'
					},{
						'title': '天空蓝',
						'name': 'bg-BlueSky'
					},{
						'title': '蓝珊瑚',
						'name': 'bg-BlueLagoon'
					},{
						'title': '维京',
						'name': 'bg-Viking'
					},{
						'title': '河流',
						'name': 'bg-River'
					},{
						'title': '榛子',
						'name': 'bg-Hazel'
					},{
						'title': '空洞',
						'name': 'bg-Windy'
					},{
						'title': '卢纳达',
						'name': 'bg-Lunada'
					},{
						'title': '夏天',
						'name': 'bg-Summer'
					},{
						'title': '婚礼',
						'name': 'bg-wedding'
					},{
						'title': '迷你',
						'name': 'bg-Mini'
					},{
						'title': '欢快',
						'name': 'bg-Fun'
					},{
						'title': '阿里',
						'name': 'bg-Ali'
					},{
						'title': '',
						'name': ''
					}
					
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	@import url("./index.css");
	@import url("../../components/Gcolor/Gcolor.css");
</style>
